import React,{ useRef,useState } from 'react'

export default function App() {
    const containerElementRef = useRef(null);
    // dom 模板的编译 -> 数据的浇灌 -> React.createElement 虚拟DOM + render
    // renderDOM
    const [ message,setMessage ] = useState(
        "Click Button to get container width"
    )
    const calculateContainerWidth = () => {
        setMessage(`Container width:
            ${containerElementRef.current.clientWidth}`
        )
    }

    return (
        <div>
            <div className="container" ref={containerElementRef}>
                <h2>{message}</h2>
                <button onClick={calculateContainerWidth}>
                    Calculate container width
                </button>
            </div>
        </div>
    )
}
